<template>
  <div
    class="h-[100vh]"
    :class="{
      'pt-[30px]': showTitleBar,
      'pt-0': !showTitleBar,
    }"
  >
    <title-bar v-show="showTitleBar" />
    <!-- <img :src="url" /> -->
    <router-view v-slot="{ Component }">
      <!-- <transition name="slide-fade"> -->
      <component
        :is="Component"
        :class="{
          'h-[calc(100vh-30px)]': showTitleBar,
          'h-[100vh]': !showTitleBar,
        }"
      />
      <!-- </transition> -->
    </router-view>
  </div>
</template>

<script setup lang="ts">
import TitleBar from "@renderer/components/title-bar/title-bar.vue";
import { onMounted, onBeforeUnmount, provide, ref, watch } from "vue";
const { ipcRenderer } = window;
import { useUserStore } from "@renderer/store/modules/user";

const userStore = useUserStore();
import { useNetwork } from "@vueuse/core";

const { isOnline } = useNetwork();

console.log(isOnline.value);
import { useBaseConfigStore } from "@renderer/store/modules/baseConfig";

const baseConfigStore = useBaseConfigStore();
// import { getKaptchaImage, demo } from "@renderer/api/login";
// let url = ref("");
let showTitleBar = ref(true);
function setShowTitleBar(value: boolean) {
  showTitleBar.value = value;
}
onMounted(async () => {
  if (!isOnline.value) {
    baseConfigStore.setNetLine(isOnline.value);
  }
  window.addEventListener("online", updateOnlineStatus);
  window.addEventListener("offline", updateOnlineStatus);
  let token = ipcRenderer.sendSync("getStore", "token");
  if (token) {
    localStorage.setItem("token", token);
    userStore.setLoginStatus(true);
    userStore.getUserInfo();
  }
});
onBeforeUnmount(() => {
  window.removeEventListener("online", updateOnlineStatus);
  window.removeEventListener("offline", updateOnlineStatus);
});
watch(
  () => baseConfigStore.ifOnline,
  () => {
    if (!baseConfigStore.ifOnline) {
      ElMessageBox.alert("检测到网络连接已断开，请检查网络连接", "提示", {
        confirmButtonText: "确定",
        callback: (action: any) => {},
        type: "warning",
      });
    } else {
      let token = ipcRenderer.sendSync("getStore", "token");
      if (token) {
        localStorage.setItem("token", token);
        userStore.setLoginStatus(true);
        userStore.getUserInfo();
      }
    }
  }
);

const updateOnlineStatus = () => {
  // console.log("navigator.onLine", navigator.onLine);
  baseConfigStore.setNetLine(navigator.onLine);
};

provide("titleBar", { setShowTitleBar });
// onMounted(() => {
//   window.addEventListener("mousemove", (event) => {
//     let flag = event.target === document.documentElement;
//     if (flag) {
//       ipcRenderer.send("set-ignore-mouse-events", {
//         ignore: true,
//         options: {
//           forward: true,
//         },
//       });
//     } else {
//       ipcRenderer.send("set-ignore-mouse-events", {
//         ignore: false,
//       });
//     }
//   });
//   ipcRenderer.send("set-ignore-mouse-events", {
//     ignore: true,
//     options: {
//       forward: true,
//     },
//   });
// });
</script>

<style>
.slide-fade-enter-active {
  transition: all 0.3s ease-out;
}

.slide-fade-leave-active {
  transition: all 0.3s cubic-bezier(1, 0.5, 0.8, 1);
}

.slide-fade-enter-from,
.slide-fade-leave-to {
  transform: translateX(20px);
  opacity: 1;
}
</style>
